<template>
  <div class="Tree">
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      unique-opened
      router
      @open="handleOpen"
      @close="handleClose"
    >
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-user-solid"></i>
          <span>成员管理</span>
        </template>
        <el-menu-item-group>
          <template slot="title"></template>
          <el-menu-item index="/layoutback/hostmanage">主持人管理</el-menu-item>
          <el-menu-item index="/layoutback/wedding">婚庆公司管理</el-menu-item>
          <el-menu-item index="/layoutback/newpeople">新人管理</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-s-goods"></i>
          <span>成员订单中心</span>
        </template>
        <el-menu-item-group>
          <template slot="title"></template>
          <el-menu-item index="/layoutback/order">主持人订单中心</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="3">
        <template slot="title">
          <i class="el-icon-s-comment"></i>
          <span>内容管理</span>
        </template>
        <el-menu-item-group>
          <template slot="title"></template>
          <el-menu-item index="/layoutback/banner">banner管理</el-menu-item>
          <el-menu-item index="/layoutback/recommend"
            >首页推荐管理</el-menu-item
          >
          <el-menu-item index="/layoutback/bottom"
            >底部文案、二维码设置</el-menu-item
          >
          <el-menu-item index="/layoutback/partner">合作伙伴管理</el-menu-item>
          <el-menu-item index="/layoutback/jointeam"
            >加入团队介绍文案</el-menu-item
          >
          <el-menu-item index="/layoutback/aboutteam"
            >关于团队介绍文案</el-menu-item
          >
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="4">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>其他管理</span>
        </template>
        <el-menu-item-group>
          <template slot="title"></template>
          <el-menu-item index="/layoutback/admin">管理员配置</el-menu-item>
          <el-menu-item index="/layoutback/level">主持人等级设置</el-menu-item>
          <el-menu-item index="/layoutback/money">管理费记录</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: "Tree",
  data() {
    return {};
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>

<style scoped>
.Tree {
  position: relative;
  left: 150px;
  text-align: left;
  width: 200px;
}
.el-submenu__icon-arrow{
  right: 6px;
}
</style>